<template>
  <header class="bg-white shadow-sm border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <!-- 左侧 Logo 和标题 -->
        <div class="flex items-center">
          <div class="flex-shrink-0 flex items-center">
            <img 
              class="h-8 w-8" 
              src="/vite.svg" 
              alt="Logo"
            >
            <span class="ml-2 text-xl font-bold text-gray-900">
              {{ title }}
            </span>
          </div>
        </div>

        <!-- 中间导航 (可选) -->
        <nav v-if="showNav" class="hidden md:flex space-x-8">
          <slot name="nav"></slot>
        </nav>

        <!-- 右侧用户信息 -->
        <div class="flex items-center space-x-4">
          <!-- 通知图标 (可选) -->
          <button 
            v-if="showNotification"
            class="p-2 text-gray-400 hover:text-gray-500 relative"
            @click="$emit('notification-click')"
          >
            <BellIcon class="h-6 w-6" />
            <span 
              v-if="notificationCount > 0"
              class="absolute -top-1 -right-1 h-4 w-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center"
            >
              {{ notificationCount > 99 ? '99+' : notificationCount }}
            </span>
          </button>

          <!-- 用户菜单 -->
          <div class="relative" v-if="userInfo">
            <Menu as="div" class="relative">
              <MenuButton class="flex items-center space-x-2 text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                <img 
                  class="h-8 w-8 rounded-full bg-gray-300" 
                  :src="userInfo.avatar || '/default-avatar.png'"
                  :alt="userInfo.name"
                >
                <span class="hidden md:block text-gray-700 font-medium">
                  {{ userInfo.name }}
                </span>
                <ChevronDownIcon class="h-4 w-4 text-gray-400" />
              </MenuButton>
              
              <transition
                enter-active-class="transition ease-out duration-100"
                enter-from-class="transform opacity-0 scale-95"
                enter-to-class="transform opacity-100 scale-100"
                leave-active-class="transition ease-in duration-75"
                leave-from-class="transform opacity-100 scale-100"
                leave-to-class="transform opacity-0 scale-95"
              >
                <MenuItems class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
                  <div class="py-1">
                    <MenuItem v-slot="{ active }">
                      <button
                        :class="[
                          active ? 'bg-gray-100' : '',
                          'block w-full text-left px-4 py-2 text-sm text-gray-700'
                        ]"
                        @click="$emit('profile-click')"
                      >
                        个人资料
                      </button>
                    </MenuItem>
                    <MenuItem v-slot="{ active }">
                      <button
                        :class="[
                          active ? 'bg-gray-100' : '',
                          'block w-full text-left px-4 py-2 text-sm text-gray-700'
                        ]"
                        @click="$emit('settings-click')"
                      >
                        设置
                      </button>
                    </MenuItem>
                    <MenuItem v-slot="{ active }">
                      <button
                        :class="[
                          active ? 'bg-gray-100' : '',
                          'block w-full text-left px-4 py-2 text-sm text-gray-700'
                        ]"
                        @click="$emit('logout')"
                      >
                        退出登录
                      </button>
                    </MenuItem>
                  </div>
                </MenuItems>
              </transition>
            </Menu>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
import { BellIcon, ChevronDownIcon } from '@heroicons/vue/24/outline'

defineProps({
  title: {
    type: String,
    default: '新生报到服务平台'
  },
  userInfo: {
    type: Object,
    default: null
  },
  showNav: {
    type: Boolean,
    default: false
  },
  showNotification: {
    type: Boolean,
    default: false
  },
  notificationCount: {
    type: Number,
    default: 0
  }
})

defineEmits([
  'notification-click',
  'profile-click', 
  'settings-click',
  'logout'
])
</script>